<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>节流</title>
</head>
<body>

<button id="throttle">点我节流！</button>

<script>
	window.onload = function() {
		// 1、获取按钮，绑定点击事件
		var myThrottle = document.getElementById("throttle");
		myThrottle.addEventListener("click", throttle(sayThrottle));
	}

	// 2、节流函数体
	function throttle(fn) {
		// 4、通过闭包保存一个标记
		let canRun = true;
		return function() {
			// 5、在函数开头判断标志是否为 true，不为 true 则中断函数
			if(!canRun) {
				return;
			}
			// 6、将 canRun 设置为 false，防止执行之前再被执行
			canRun = false;
			// 7、定时器
			setTimeout( () => {
				fn.call(this, arguments);
				// 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
				canRun = true;
			}, 1000);
		};
	}

	// 3、需要节流的事件
	function sayThrottle() {
		console.log("节流成功！");
	}

</script>
</body>
</html>
